<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<c:if test="${hasErrors}"><meta id="error"></c:if>

<script type="text/javascript">
   $(document).ready(function () {
      var theme = getSowTheme('ui-redmond');
      $("#jqxCheckBox").jqxCheckBox({
         width: 20,
         height: 20,
         boxSize: 15,
         theme: theme,
         checked: <c:choose><c:when test="${userForm.enabled}">true</c:when><c:otherwise>false</c:otherwise></c:choose>
      });
      
      $("#jqxCheckBox").bind('change', function (event) {
         var checked = event.args.checked;
         if (checked) {
            $("input[name='enabled']").attr('checked', true);
         }
         else {
         	$("input[name='enabled']").attr('checked', false);
         }
      });
   });
</script>

<form:form name="userForm" commandName="userForm">
<form:hidden path="id"/>

<table style="border-spacing: 4px; padding: 0px; width: 100%">
   <tr style="vertical-align: top">
      <td nowrap="nowrap">
         <span>Username</span><br>
         <form:input path="username" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
         <form:errors path="username" cssStyle="color:red" />
      </td>
      <td width="10px" rowspan="3">&nbsp;</td>
      <td nowrap="nowrap">
         <span>Password</span><br>
         <form:password path="password" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /><br>
         <form:errors path="password" cssStyle="color:red" />
      </td>
      <td width="10px" rowspan="3">&nbsp;</td>
      <td><span>Enabled</span><br><div id='jqxCheckBox'></div><form:checkbox path="enabled" value="Y" cssStyle="height: 21px; display: none" /></td>
   </tr>
   <tr style="vertical-align: top">
      <td nowrap="nowrap">
         <span>First Name</span><br>
         <form:input path="firstName" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
         <form:errors path="firstName" cssStyle="color:red" />
      </td>
      <td nowrap="nowrap">
         <span>Last Name</span><br>
         <form:input path="lastName" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /> (<span style="color: red">*</span>)<br>
         <form:errors path="lastName" cssStyle="color:red" />
      </td>
      <td><span>Middle Name</span><br><form:input path="middleName" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
   </tr>
   <tr style="vertical-align: top">
      <td><span>Email</span><br><form:input path="email" maxlength="30" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
      <td><span>Phone</span><br><form:input path="phone" maxlength="15" cssStyle="height: 21px" cssClass="text ui-widget-content ui-corner-all" /></td>
      <td><span>Role</span><br><div id='jqxRole'></div><form:select path="role" items="${roles}" itemLabel="authority" itemValue="id" cssStyle="display:none" /></td>
      <script type="text/javascript">
         $("#jqxRole").jqxComboBox({ width: '145', height: '21', theme: getSowTheme('ui-redmond'), autoDropDownHeight: true });
         $("#jqxRole").jqxComboBox('loadFromSelect', 'role');
         $("#jqxRole").jqxComboBox('selectIndex', $("#role").get(0).selectedIndex);
         $("#jqxRole").bind('change', function (event) { $("#role").val(event.args.item.value); });
      </script>
   </tr>
</table><br>

</form:form>